import React, {useEffect, useState} from 'react';
import {Modal, View, Text, TouchableOpacity, StyleSheet, TextInput, ScrollView, Image} from 'react-native';
import searchIcon from "@/assets/images/releaseImg/searchIcon.png";
import MapView, { Marker } from 'react-native-maps';
import * as Location from "expo-location";

const BottomModal = ({ visible, onClose, onConfirm }) => {

    const [location, setLocation] = useState(null);

    useEffect(() => {
        (async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                console.log('Permission to access location was denied');
                return;
            }

            let currentLocation = await Location.getCurrentPositionAsync({});
            setLocation(currentLocation.coords);
        })();
    }, []);

    return (
        <Modal
            visible={visible}
            transparent={true}
            animationType="slide"
            onRequestClose={onClose}
        >
            <View style={styles.overlay}>
                <View style={styles.modalContainer}>
                    {/* 顶部标题栏 */}
                    <View style={styles.header}>
                        <TouchableOpacity onPress={onClose}>
                            <Text style={styles.cancelText}>取消</Text>
                        </TouchableOpacity>
                        <Text style={styles.title}>活动地点</Text>
                        <TouchableOpacity onPress={onConfirm}>
                            <Text style={styles.confirmText}>确认</Text>
                        </TouchableOpacity>
                    </View>

                    {/* 搜索框 */}
                    <View style={styles.searchContainer}>
                        <View style={styles.searchIcon}>
                            <Image source={searchIcon}  style={{ width: "100%", height: "100%" }} />
                        </View>
                        <TextInput
                            style={styles.searchInput}
                            placeholder="请输入搜索内容"
                        />
                    </View>



                    {/* 内容区域 */}
                    <ScrollView style={styles.content}>
                        {/* 示例地图 */}
                        <View style={styles.mapPlaceholder}>
                            <MapView
                                style={{ flex: 1 }}
                                region={{
                                    latitude: 23.114155,  // 默认显示北京
                                    longitude: 113.318977, // 默认显示北京
                                    latitudeDelta: 0.09, // 更小的值可以更大程度地放大到县级
                                    longitudeDelta: 0.09, // 尝试从更小的缩放级别开始
                                }}
                                zoomLevel={10}
                            >
                                <Marker
                                    coordinate={{
                                        latitude: 23.114155,
                                        longitude: 113.318977,
                                    }}
                                    title="北京"
                                    description="天安门"
                                />
                            </MapView>
                        </View>

                        {/* 地点列表 */}
                        <View style={styles.locationItem}>
                            <Text style={styles.locationTitle}>宝地广场</Text>
                            <Text style={styles.locationDescription}>置洲大道79-87号 (磨碟沙地铁站入口步行80米)</Text>
                        </View>

                        <View style={styles.locationItem}>
                            <Text style={styles.locationTitle}>广铝国际中心</Text>
                            <Text style={styles.locationDescription}>置洲大道78号 (磨碟沙地铁站B口步行460米)</Text>
                        </View>

                        {/* 更多地点可以继续添加 */}
                    </ScrollView>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end',
    },
    modalContainer: {
        backgroundColor: '#fff',
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        paddingBottom: 20,
        flex: 1,
        maxHeight: '80%',
        height: 500,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 15,
        // borderBottomWidth: 1,
        // borderBottomColor: '#ddd',
    },
    title: {
        fontSize: 14,
        fontWeight: 'bold',
    },
    cancelText: {
        color: '#333333',
    },
    confirmText: {
        color: '#EC6138',
    },
    searchInput: {

    },
    content: {
        paddingHorizontal: 15,
        flex: 1,
    },
    mapPlaceholder: {
        height: 150,
        // backgroundColor: '#f0f0f0',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 15,
        borderRadius: 5,
    },
    locationItem: {
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
    },
    locationTitle: {
        fontSize: 16,
        fontWeight: '500',
    },
    locationDescription: {
        fontSize: 12,
        color: '#888',
    },
    searchIcon: {
        width: 12,
        height: 12,
        marginRight: 4,
    },
    searchContainer: {
        flexDirection: "row",
        alignItems: "center",
        margin: 15,
        padding: 10,
        borderRadius: 18,
        backgroundColor: "#F7F8F9",
        paddingLeft: 12,
    },
});

export default BottomModal;
